<template>
  <a-typography>
    <a-typography-title :heading="3"
      >{{ question.title }}
      <span style="font-size: 15px"
        ><i
          class="iconfont icon-jinbi"
          style="color: #ffc53d; font-size: 20px"
        />{{ question.integral }}</span
      ></a-typography-title
    >
    <a-typography-paragraph>
      <a-space wrap>
        <a-button
          v-for="(tagInfo, index) in question.tags"
          :key="index"
          size="mini"
          type="primary"
        >
          {{ tagInfo }}
        </a-button>
      </a-space>
    </a-typography-paragraph>
    <a-typography-title :heading="4">判题限制</a-typography-title>
    <a-typography-paragraph>
      <a-typography-text>
        <div>内存限制:{{ limit.memoryLimit }}kb</div>
        <div>时间限制:{{ limit.timeLimit }}ms</div>
      </a-typography-text>
    </a-typography-paragraph>
    <a-typography-title :heading="4">题目描述</a-typography-title>
    <a-typography-paragraph>
      <WatchMdEdier :text="question.content" />
    </a-typography-paragraph>
    <a-typography-paragraph v-if="loginUser.userRole == userRole.ADMIN">
      <a-typography-title :heading="4">答案:</a-typography-title>
      <WatchAnswerMd :text="question.answer" />
    </a-typography-paragraph>
  </a-typography>
</template>
<script setup lang="ts">
import WatchMdEdier from "@/components/question/WatchMdEdier.vue";
import { onMounted, reactive } from "vue";
import {
  JudgeConfig,
  QuestionControllerService,
  QuestionVO,
} from "../../../generated";
import { useQuestion } from "@/store/question";
import { storeToRefs } from "pinia";
import WatchAnswerMd from "@/components/question/WatchAnswerMd.vue";
import userRole from "@/access/permissionEnum";
import { useUser } from "@/store/user";

let user = useUser();
let { loginUser } = storeToRefs(user);
let questionPinia = useQuestion();
let { questionId } = storeToRefs(questionPinia);

let question = reactive({
  acceptedNum: 0,
  content:
    "题目描述\n" +
    "​ 给定三个小于100的正整数，求它们的乘积。\n" +
    "\n" +
    "输入\n" +
    "​ 一行三个整数 a b c（1≤a,b,c≤100）\n" +
    "输出\n" +
    "​ 一个整数表示三数的乘积",
  createTime: "",
  favourNum: 0,
  id: 0,
  integral: 0,
  judgeConfig: {
    memoryLimit: 1000,
    stackLimit: 0,
    timeLimit: 500,
  },
  submitNum: 0,
  tags: ["困难", "算法", "深度优先算法"],
  thumbNum: 0,
  title: "兔子繁殖问题",
  updateTime: "",
  userId: 0,
} as QuestionVO);

let limit = reactive({
  memoryLimit: 0,
  stackLimit: 0,
  timeLimit: 0,
} as JudgeConfig);

onMounted(async () => {
  let questionVoByIdUsingGet =
    await QuestionControllerService.getQuestionVoByIdUsingGet(questionId.value);
  if (questionVoByIdUsingGet.code == 0) {
    Object.assign(question, questionVoByIdUsingGet.data);
    Object.assign(limit, question.judgeConfig);
  }
});
</script>

<style scoped>
.tab {
  padding: 2px 5px 2px 5px;
  background-color: #b5f5ec;
  border-radius: 2ch;
}
</style>
